<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddTbk ref="addRef" @getDataList="getDataList" />
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">TBK一跳链接</span>
            <div class="flexbox flexcenter">
                <el-input placeholder="用户名、商品名称" size="small" style="width:300px;margin-right:12px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.keyword">
                </el-input>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="AddJd()">创建链接</el-button>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="goods_name" label="商品名称" min-width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="goods_id" label="商品ID" width="160">
                </el-table-column>
                <el-table-column prop="mobile_url" label="一跳链接" min-width="200">
                    <template slot-scope="scope">
                        <template v-if="scope.row.mobile_url">
                            <div class="flexbox flexcenter">
                                <span class="flex oneline">{{scope.row.mobile_url}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.mobile_url)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="160">
                </el-table-column>
                <el-table-column prop="appid" label="店铺appid" width="180">
                </el-table-column>
                <el-table-column prop="create_time" label="时间" width="200">
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddTbk from "./AddTbk";
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
                keyword: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "cid/Tbk/tbkList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        AddJd() {
            this.$refs.addRef.dialogVisible = true;
            this.$refs.addRef.getUserList();
            this.$refs.addRef.getShopList();
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddTbk,
    },
};
</script>


<style scoped>
.strategy_head {
    height: auto;
    margin-top: 20px;
}
.oneline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copy_btn {
    cursor: pointer;
    flex-shrink: 0;
}
</style>


